// 客户模糊查询
import React from 'react';
import { Select, Spin } from 'antd';
import { connect } from 'dva';

const { Option, OptGroup } = Select;

@connect(({ editinvrule: { custList, suppList }, loading }) => ({
  custList,
  suppList,
  loading: loading.effects['editinvrule/fetchCustSuppList'],
}))
class CustOrSupp extends React.Component {
  componentDidMount() {
    const { onRef } = this.props;
    if (onRef) {
      onRef(this);
    }
  }

  // 获取地址
  search = value => {
    const { dispatch } = this.props;
    if (value.trim().length) {
      dispatch({
        type: 'editinvrule/fetchCustSuppList',
        payload: value.trim(),
      });
    }
  };

  render() {
    const { custList = [], suppList = [], loading, getData = () => {}, attr } = this.props;
    return (
      <Select
        placeholder="请输入关键字检索"
        {...this.props}
        showSearch
        optionFilterProp="children"
        showArrow={false}
        onSearch={this.search}
        onSelect={(value, options) => getData(value, options)}
        notFoundContent={loading ? <Spin size="small" /> : null}
        loading={false}
      >
        <OptGroup
          // label={<p style={{ margin: '0 10px', borderBottom: '1px solid #e8e8e8' }}>客户</p>}
          label="客户"
        >
          {custList.map(item => (
            <Option key={attr ? item.mdCustId : item.custId} title={item.name} fsOptions={item}>
              {item.name}
            </Option>
          ))}
        </OptGroup>
        <OptGroup
          // label={<p style={{ margin: '0 10px', borderBottom: '1px solid #e8e8e8' }}>供应商</p>}
          label="供应商"
        >
          {suppList.map(item => (
            <Option key={item.suppId} title={item.name} fsOptions={item}>
              {item.name}
            </Option>
          ))}
        </OptGroup>
      </Select>
    );
  }
}
export default CustOrSupp;
